<template>
  <!-- 容器 -->
  <div class="charts" ref="charts"></div>
</template>

<script>
// 引入echarts
import * as echarts from 'echarts'

export default {
  props: ['title', 'listState'],
  name: '',
  data() {
    return {
      barChart: null,
    }
  },
  computed: {
    ctitle() {
      return this.title
    },
    clistState() {
      return this.listState
    },
  },
  mounted() {
    // 初始化echarts实例
    this.barChart = echarts.init(this.$refs.charts)
    // 配置数据
    this.barChart.setOption({
      title: {
        text: this.ctitle + '趋势',
      },
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow',
        },
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true,
      },
      xAxis: [
        {
          type: 'category',
          data: [],
          axisTick: {
            alignWithLabel: true,
          },
        },
      ],
      yAxis: [
        {
          type: 'value',
        },
      ],
      series: [
        {
          name: 'Direct',
          type: 'bar',
          barWidth: '60%',
          data: [],
          color: '#ad2424',
        },
      ],
    })
  },
  watch: {
    ctitle() {
      // 重新修改图标配置数据
      // 图表配置数据可以在此修改，日国有新的数值，就用新的，没有急用之前的
      this.barChart.setOption({
        title: { text: this.ctitle + '趋势' },
        xAxis: {
          data:
            this.title == '销售额' ? this.clistState.orderFullYearAxis : this.clistState.userFullYearAxis,
        },
        series: [
          {
            name: 'Direct',
            type: 'bar',
            barWidth: '60%',
            data:
              this.title == '销售额' ? this.clistState.orderFullYear : this.clistState.userFullYear,
            color: '#ad2424',
          },
        ],
      })
    },
    clistState() {
      this.barChart.setOption({
        title: { text: this.ctitle + '趋势' },
        xAxis: {
          data:
            this.clistState.orderFullYearAxis
        },
        series: [
          {
            name: 'Direct',
            type: 'bar',
            barWidth: '60%',
            data:
              this.clistState.orderFullYear,
            color: '#ad2424',
          },
        ],
      })
    }
  },
}
</script>

<style scoped>
.charts {
  width: 100%;
  height: 300px;
  color: #ad2424;
}
</style>